import React, { useState } from 'react';
import { Select } from 'antd';
import { CaretDownOutlined } from '#/utils/antdIcons';
import styles from './index.less';

function TRSelect(props) {
  const { width = 60, fieldNames, options, ...selectProps } = props;
  const FIELD_NAMES = fieldNames || {
    label: 'label',
    value: 'value',
  };
  const [open, setOpen] = useState(false);

  return (
    <Select
      style={{ width: width }}
      {...selectProps}
      onDropdownVisibleChange={(open) => setOpen(open)}
      suffixIcon={
        <CaretDownOutlined
          className={open && styles.selectOpen}
          style={{ pointerEvents: 'none' }}
        />
      }
    >
      {options.map((x, idx) => (
        <Select.Option {...x} key={idx} value={x[FIELD_NAMES.value]}>
          {x[FIELD_NAMES.label]}
        </Select.Option>
      ))}
    </Select>
  );
}

export default TRSelect;
